import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { AtSearchBar, AtTabBar } from 'taro-ui'
import styles from './index.module.less'
import Card from '../../components/Card'
import Footer from '../../components/Footer'

const menuItem = [
    {
        image: 'https://img.yzcdn.cn/upload_files/2019/12/31/FvfO33fJu9d5946fdfElIO4_Q36O.png!large.png',
        value: '蒙宝盒子'
    },
    {
        image: 'https://img.yzcdn.cn/upload_files/2019/12/31/Fl6MECiYLuYmmw2actO9APeVnLeV.png!large.png',
        value: '蒙氏单品'
    },
    {
        image: 'https://img.yzcdn.cn/upload_files/2020/03/01/FjWxnoW-8sp267r5o74SUTUoHFiq.png!large.png',
        value: '蒙品家备'
    },
    {
        image: 'https://img.yzcdn.cn/upload_files/2019/12/31/Fur2w5nZ6QyrdNEVzcQ4HuI8a48b.png!large.png',
        value: '经典绘本'
    },
    {
        image: 'https://img.yzcdn.cn/upload_files/2020/03/01/FpnKUyjW5S3eomaQcrxD1bmUXIhD.png!large.png',
        value: '美语产品'
    },
    {
        image: 'https://img.yzcdn.cn/upload_files/2020/03/01/FmyZhfVvWsiUEsuQzopHffaP79wF.png!large.png',
        value: '入园必备'
    },
    {
        image: 'https://img.yzcdn.cn/upload_files/2019/12/31/FhurkGcoVCDAlMtoTCdorLTK-boV.png!large.png',
        value: '蒙氏著作'
    },
    {
        image: 'https://img.yzcdn.cn/upload_files/2019/12/31/FhurkGcoVCDAlMtoTCdorLTK-boV.png!large.png',
        value: '家庭教育'
    }
]

//商品数据
const goods = [
    {
        id: '111',
        price: 199,
        img: 'https://img.yzcdn.cn/upload_files/2019/12/28/FoFDqOTQlnSDm7NiU6lEg6GKzZ7O.JPG!middle.jpg',
        type: '',
        title: '蒙宝盒子来喽~12月龄',
        url: 'https://www.baidu.com',
    },
    {
        id: '222',
        price: 199,
        img: 'https://img.yzcdn.cn/upload_files/2019/12/30/FovEX5UDC4WPW7JqmCeQ5FfrSn40.JPG!middle.jpg',
        type: '',
        title: '蒙宝盒子来喽~13月龄',
        url: 'https://www.baidu.com',
    },
    {
        id: '333',
        price: 199,
        img: 'https://img.yzcdn.cn/upload_files/2019/12/28/FoFDqOTQlnSDm7NiU6lEg6GKzZ7O.JPG!middle.jpg',
        type: '',
        title: '蒙宝盒子来喽~12月龄',
        url: 'https://www.baidu.com',
    },
    {
        id: '444',
        price: 199,
        img: 'https://img.yzcdn.cn/upload_files/2019/12/30/FovEX5UDC4WPW7JqmCeQ5FfrSn40.JPG!middle.jpg',
        type: '',
        title: '蒙宝盒子来喽~13月龄',
        url: 'https://www.baidu.com',
    },
]

export default class extends Component {
    constructor(props) {
        super(props)
    }

    render() {

        return (
            <View className={styles.page}>

                <Image className={styles.coverImage} src='https://img.yzcdn.cn/upload_files/2020/03/12/FuvfY6p8VJKFrPsbw6953b1eg2Yz.png!large.png' mode='scaleToFill' ></Image>
                <View className={styles.menuContainer}>
                    {menuItem.map(item => (
                        <View className={styles.menuItem} key={item.value} >
                            <Image className={styles.menuItemImage} src={item.image} mode='scaleToFill' />
                            <View className={styles.menuItemText}>{item.value}</View>
                        </View>
                    ))}
                </View>
                <AtSearchBar></AtSearchBar>
                <View className={styles.menuTitle}>热品好物</View>
                <View className={styles.goods}>
                    <Image className={styles.goodsPic} src='https://img.yzcdn.cn/upload_files/2019/12/28/Fl7nKjhIspLJIDP1hSWbR1J-cFrw.jpg!large.jpg' mode='scaleToFill' />
                    <Image className={styles.goodsPic} src='https://img.yzcdn.cn/upload_files/2019/12/30/FovEX5UDC4WPW7JqmCeQ5FfrSn40.JPG!large.jpg' mode='scaleToFill' />
                    <Image className={styles.goodsPic} src='https://img.yzcdn.cn/upload_files/2019/12/30/FgBTrvJANoOs2iL4lEUtekQWYmiN.JPG!large.jpg' mode='scaleToFill' />
                    <Image className={styles.goodsPic} src='https://img.yzcdn.cn/upload_files/2019/12/30/FvfFx7GFBfVSP3Q0NchL60nKfQQ9.JPG!large.jpg' mode='scaleToFill' />
                </View>
                <View style={{ textAlign: 'center' }}>
                    <Image className={styles.goodsBanner} src='https://img.yzcdn.cn/upload_files/2019/12/31/FiQr8U_x6pDj7CFS9gGmg8dcwSM9.png!large.png' />
                </View>
                <View>
                    <View className={styles.columnListContainer}>
                        {goods.map(item => (
                            <View className={styles.divToTwo} key={item.id}>
                                <Card {...item} />
                            </View>
                        ))}
                    </View>
                </View>
                <Footer />
            </View >
        )
    }
}
